<template>
  <div class="task-list">
       <div v-html="tableau"></div>
  </div>
</template>

<script>
import axios from 'axios'
import XLSX from 'xlsx'
import { util } from "@/utils/common.js";

export default {
  name: 'TaskList',
  data: function () {
    return {
      tableau: '',    //初始化数据
      err:''
    }
  },
  props:{
    url:{
      type:String,
      value:[]
    }
  },
  mounted() {
    var url = util.fileBaseUrl+this.url  //放在public目录下的文件可以直接访问
    
    //读取二进制excel文件,参考https://github.com/SheetJS/js-xlsx#utility-functions
    axios.get(url, {responseType:'arraybuffer'})
    .then((res) => {
        var data = new Uint8Array(res.data)
    var wb = XLSX.read(data, {type:"array"})
    var sheets = wb.Sheets[wb.SheetNames[0]]
    console.log('sheets',wb.SheetNames[0])
    this.tableau = XLSX.utils.sheet_to_html(sheets)
    
    this.tableau = this.tableau.replace('<table>','<table class="tableClass">')
    this.tableau = this.tableau.replace('</table>','</table><style scoped>.tableClass{border: 1px solid #666;border-collapse:collapse;border-spacing: 0;}.tableClass td{border: 1px solid #666;padding: 2px 5px;}</style>')
    // this.tableau = this.tableau.replace('<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body>','')
    // this.tableau = this.tableau.replace('</body></html>','')
    console.log(this.tableau)
    }).catch( err =>{
      this.err = err
    })
  }
}
</script>
<style lang="scss" scoped>
// .task-list{
//   background: red;
// }
table{
  border: 1px solid #666;
  border-collapse:collapse;
  border-spacing: 0;
  td{
    
  border: 1px solid #666;
  padding: 2px 5px;
  }
}
</style>